<template>
    <view>
        <view class="load" v-if="!load">
            <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
        </view>
        <block v-else>
            <view class="navBox">
                <topStatus></topStatus>
                <view class="nav_main">
                    <!-- <uni-icons type="left" color="#333" size="30" @click="goBack()"></uni-icons> -->
                    <view class="nav_tit">
                        回乡创业新农人
                    </view>
                    <!-- <uni-icons type="left" color="#333" size="30" style="opacity: 0;"></uni-icons> -->
                </view>
            </view>

            <view class="searchCell">
                <image src=" https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732240800513109.png"
                    class="searchimg">
                </image>
                <view class="scInp">
                    <input type="text" v-model="searchContent" placeholder="| 请输入关键词" placeholder-class="placname"
                        @blur="subblur" />
                </view>
                <view class="scBtnBox">
                    <view class="scSumBtn" @click="subSearch">搜索</view>
                </view>
            </view>

            <view class="bannerBox">
                <swiper v-if="flagList.length" class="barimg" :indicator-dots="true" :autoplay="true" :interval="3000"
                    :duration="1000" indicator-active-color="#ff531c">
                    <swiper-item v-for="(item, index) in flagList" :key="index" @click="gotoFlag(item)">
                        <image :src="item.Banner" mode="aspectFill"></image>
                    </swiper-item>
                </swiper>
            </view>


            <view class="loacl_box">
                <block v-if="pa_list.length">
                    <view class="heatbox" v-for="(el, i) in pa_list" :key="i">
                        <view class="heattextbox" @click="nav_to('/pages/store/farm_detail?id=' + el.ID)">
                            <view class="heat_til">{{ el.PlaceName }}</view>
                            <!-- <image class="heat_img"
                                src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732534745240412.png"></image> -->
                            <view class="heat_more"> {{ el.Province }} · {{ el.City }} {{ el.Area ? ` · ${el.Area}` : '' }}
                            </view>
                        </view>
                        <view class="headImgBox" @click="nav_to('/pages/store/farm_detail?id=' + el.ID)">
                            <image :src="el.Banner" mode="widthFix" />
                        </view>
                        <view class="heat_shop_box">
                            <view class="heat_shop" v-for="(item, index) in el.MainProductList" :key="index"
                                @click="nav_to(`/pages/shop/detail?id=${item.ID}`)">
                                <image class="heat_spimg" :src="item.Images.split(',')[0]" mode="aspectFill"></image>
                                <view class="heat_spname">{{ item.ProductName }}</view>
                                <view class="good_label" v-if="item.PromotionType">
                                    {{ item.PromotionType }}
                                </view>

                                <view class="heat_price_box">
                                    <view class="heat_price">
                                        <text class="pr_icon">￥</text>{{ item.Price }}
                                    </view>
                                    <view class="heat_payCount">
                                        已售 {{ getPayCount(item.VirtualSellNum) || '0' }}
                                    </view>
                                </view>

                            </view>
                        </view>
                    </view>
                    <!-- <view class="loacl_bg1" v-for="(item, index) in pa_list" :key="index"
                        @click="nav_to('/pages/store/pa_detail?id=' + item.ID)">
                        <view class="loacl_bg2">
                            <view class="loacl_imgbox">
                                <image class="loacl_img" mode="aspectFill" :src="item.Banner"></image>
                            </view>

                            <view class="loacl_shopbox">
                                <view class="loashopcont" v-for="(value, i) in item.MainProductList" :key="i"
                                    @click.stop="goDetail(value.ID)">
                                    <image class="lo_shopimg" mode="aspectFill" :src="value.Images.split(',')[0]">
                                    </image>
                                    <view class="lo_shopname hiddenText">{{ value.ProductName }}</view>
                                    <view class="lo_shopprice">
                                        <view class="lo_shopprice_price">
                                            <text class="lo_pricon">￥</text>{{ value.Price }}
                                        </view>
                                        <view class="lo_shopprice_pay">
                                            已售 {{ getPayCount(value.VirtualSellNum) || '0' }}
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="loacl_bg3">
                            <view class="loacl_tit">
                                {{ HomeTownText(item.PlaceName) }}
                            </view>
                            <view class="loacl_address">
                                {{ item.Province }} · {{ item.City }}
                            </view>
                        </view>
                    </view> -->
                </block>

                <EmptyBox class="nullbox" v-else text="暂无数据"></EmptyBox>
                <BtmLogo></BtmLogo>
            </view>
        </block>
    </view>
</template>

<script>
import topStatus from '@/components/topStatus/topStatus.vue';
export default {
    components: {
        topStatus
    },
    data() {
        return {
            load: false,
            PageIndex: 1,
            PageSize: 10,
            pa_list: [],
            isMore: true,
            searchContent: '',

            homeEntry: [],
            myHomeTown: '',
            flagList: []
        };
    },
    onLoad() {
        this.init()
    },
    onShow() {
        this.getMyCartNum()
        this.getFlagBanner()
    },
    onReachBottom() {
        if (this.isMore) {
            this.PageIndex++;
            this.localList();
        }
    },
    methods: {
        async getFlagBanner() {
            let res = await this.$api.post("/Banner/GetBanner", {
                PageKey: "newfarm_top",
            });
            if (res.code == 0) {
                if (res.data) {
                    this.flagList = res.data;
                }
            }
        },
        gotoFlag(item) {
            if (item.GoUrl) {
                this.nav_to(item.GoUrl)
            } else {
                this.$pv.msg('未找到该路径')
            }
            // this.nav_to('/pages/shop/IconicProduct')
        },
        HomeTownText(text) {
            if (text.length > 10) {
                return text.slice(0, 9) + '...'
            }
            return text
        },
        getPayCount(item) {
            return item > 1000 ? (item / 1000).toFixed(1) + 'k' : item > 1000000 ? (item / 1000000).toFixed(1) + 'M' : item > 100000000 ? (item / 100000000).toFixed(1) : item
        },
        async init() {
            this.localList()
        },
        // 点击跳转详情
        goDetail(id) {
            this.nav_to(`/pages/shop/detail?id=${id}`)
        },
        async localList() {
            let res = await this.$api.post('NewFarmer/PageList', {
                PageIndex: this.PageIndex,
                PageSize: this.PageSize,
                PlaceName: this.searchContent,
            })
            if (res.code == 0) {
                this.pa_list = this.PageIndex == 1 ? res.data : this.pa_list.concat(res.data)
                this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;
                this.load = true
            }
        },
        subSearch() {
            this.PageIndex = 1
            // this.isSearch = true
            // this.searchLoding = true
            this.localList();
        },
        subblur() {
            this.PageIndex = 1
            // this.isSearch = true
            // this.searchLoding = true
            this.localList();
        },
    },
}
</script>
<style lang='scss'>
page {
    // background: linear-gradient(159deg, #D13D19 0%, #A60C0A 100%);
    background: #0E943B;
}

.nullbox {
    view {
        color: #ccc !important;
    }
}

.navBox {
    .nav_main {
        padding: 0 14rpx;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36rpx;
        color: #fff;

        .nav_tit {
            font-size: 36rpx;
            font-weight: bold;
            color: #fff;
        }
    }
}

.searchCell {
    width: 702rpx;
    height: 72rpx;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 36rpx;
    margin: 0 auto;
    box-shadow: 0 0 4rpx #ccc;
    margin-bottom: 40rpx;

    .scIcon {
        margin-right: 16rpx;
    }

    .searchimg {
        width: 32rpx;
        height: 32rpx;
        margin-left: 32rpx;
    }

    .scInp {
        flex: 1;
        margin-left: 5rpx;

        >input {
            width: 100%;
            background: transparent;
            margin-left: 16rpx;
        }

        .placname {
            color: #999999;
            font-size: 28rpx;
            // margin-left: 16rpx;
        }
    }

    .scBtnBox {
        display: flex;
        // margin-left: auto;
        margin-right: 8rpx;

        .scSumBtn {
            padding: 13rpx 34rpx;
            background: #FF6030;
            border-radius: 32rpx;
            font-weight: 500;
            font-size: 24rpx;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

            &:last-child {
                margin-left: 20rpx;
            }
        }
    }
}

.loacl_box {
    width: 100%;
    padding-bottom: 100rpx;

    .heatbox {
        width: 702rpx;
        // height: 402rpx;
        margin: 20rpx auto;
        background-image: url('https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17325278470281311.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        border-radius: 30rpx;

        .heattextbox {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 26rpx 22rpx;
            padding-bottom: 0;
            box-sizing: border-box;

            .heat_til {
                font-size: 32rpx;
                font-weight: bold;
                margin-right: 8rpx;
            }

            .heat_img {
                width: 38rpx;
                height: 38rpx;
            }

            .heat_more {
                // width: 128rpx;
                height: 44rpx;
                // background: linear-gradient(90deg, rgba(250, 113, 52, 0.05) 0%, rgba(253, 151, 74, 0.21) 100%);
                border-radius: 24rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 22rpx;
                color: #FF6030;
                margin-left: auto;
            }
        }

        .headImgBox {
            width: 100%;
            padding: 12rpx;

            image {
                width: 100%;
                height: 100%;
                display: block;
                border-radius: 12rpx;
            }
        }

        .heat_shop_box {
            overflow-x: auto;
            width: 100%;
            padding: 0 22rpx;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            margin-top: 10rpx;

            .heat_shop {
                width: 156rpx;
                margin-right: 16rpx;
                position: relative;

                .good_label {
                    position: absolute;
                    top: 0;
                    left: 0;
                    padding: 8rpx 12rpx;
                    background-color: #FF471A;
                    color: #fff;
                    font-size: 16rpx;
                    border-radius: 16rpx 0 16rpx 0;
                }

                .good_label_green {
                    background-color: #1ed68d;
                }

                .heat_spimg {
                    width: 156rpx;
                    height: 156rpx;
                    // background-color: red;
                    border-radius: 16rpx;
                }

                .heat_spname {
                    width: 156rpx;
                    font-size: 24rpx;
                    display: -webkit-box;
                    /* 设置为WebKit内核的弹性盒子模型 */
                    -webkit-box-orient: vertical;
                    /* 垂直排列 */
                    -webkit-line-clamp: 2;
                    /* 限制显示两行 */
                    overflow: hidden;
                    /* 隐藏超出范围的内容 */
                    text-overflow: ellipsis;
                    /* 使用省略号 */

                }

                .heat_price_box {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .heat_payCount {
                        font-size: 18rpx;
                        color: #999;
                    }
                }

                .heat_price {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #FF6030;
                }

                .pr_icon {
                    font-size: 20rpx;
                    font-weight: bold;
                    color: #FF6030;
                }
            }
        }
    }

    .loacl_bg1 {
        width: 710rpx;
        height: 726rpx;
        background-image: url('https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17329480413391424.png');
        background-size: cover;
        background-repeat: no-repeat;
        margin: 0 auto;
        margin-top: 58rpx;
        margin-bottom: 78rpx;
        // overflow: hidden;
        position: relative;
        // border-top:1px solid transprent;
        padding: 16rpx 12rpx;
        box-sizing: border-box;

        .loacl_bg2 {
            width: 684rpx;
            height: 694rpx;
            background-image: url('https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17329480587611347.png');
            background-size: cover;
            background-repeat: no-repeat;
            overflow: hidden;

            .loacl_imgbox {
                width: 652rpx;
                height: 300rpx;
                border-radius: 24rpx;
                border: 4rpx solid #FCD39B;
                // display: block;
                margin: 0 auto;
                margin-bottom: 16rpx;
                margin-top: 62rpx;

                .loacl_img {
                    width: 100%;
                    height: 100%;
                    border-radius: 24rpx;
                    background-color: purple;
                }
            }

            .loacl_shopbox {
                width: 652rpx;
                margin: 0 auto;
                display: flex;
                align-items: center;
                /* overflow-x: auto; */

                .loashopcont {
                    width: 212rpx;
                    height: 300rpx;
                    background: #FFFFFF;
                    border-radius: 8rpx;
                    text-align: center;
                    margin-right: 8rpx;

                    .lo_shopimg {
                        width: 212rpx;
                        height: 210rpx;
                        border-radius: 8rpx 8rpx 0rpx 0rpx;
                        background-color: skyblue;
                    }

                    .lo_shopname {
                        width: 196rpx;
                        margin: 0 auto;
                        font-size: 24rpx;
                    }

                    .lo_shopprice {
                        padding: 8rpx;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .lo_shopprice_price {
                            font-size: 28rpx;
                            font-weight: bold;
                            color: #FF6030;
                        }

                        .lo_shopprice_pay {
                            font-size: 18rpx;
                            color: #999;
                        }
                    }

                    .lo_pricon {
                        font-size: 24rpx;
                        color: #FF6030;
                    }
                }
            }
        }

        .loacl_bg3 {
            position: absolute;
            width: 434rpx;
            height: 120rpx;
            background-image: url('https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732948740015861.png');
            background-size: cover;
            background-repeat: no-repeat;
            top: -52rpx;
            left: 50%;
            transform: translateX(-50%);
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            view {
                color: #FFDDAF;
            }

            .loacl_tit {
                margin-top: -10rpx;
                font-size: 36rpx;
            }

            .loacl_address {
                font-size: 22rpx;
                width: 356rpx;
                overflow: hidden;
                /*超出部分隐藏*/
                white-space: nowrap;
                /*禁止换行*/
                text-overflow: ellipsis;
                /*省略号*/
                text-align: center;
            }
        }
    }
}

.bannerBox {
    width: 100%;
    margin-bottom: 20rpx;

    .barimg {
        width: 702rpx;
        height: 300rpx;
        display: block;
        margin: 20rpx auto;

        swiper-item {
            width: 100%;
            height: 100%;
            border-radius: 16rpx;
            overflow: hidden;

            >image {
                width: 100%;
                height: 100%;
            }
        }

    }

    .barimg_map {
        width: 702rpx;
        height: 150rpx;
    }
}
</style>